<template>
  <div class='page'>
    <!--        <van-nav-bar :title='$t('m.header.home')' />-->
    <van-pull-refresh ref='pull' v-model='isLoading' @refresh='onRefresh'>
      <div class='container'>
        <van-swipe :autoplay='3000' class='swipe'>
          <van-swipe-item v-for='(bannerItem, bannerIndex) in bannerList' :key='bannerIndex'>
            <img v-lazy='bannerItem.img' class='swipe_img'>
          </van-swipe-item>
        </van-swipe>
        <div class='product_header'>
          {{ $t('m.product.recommentTitle') }}
        </div>
        <div class='content flex'>
          <div v-for='(productItem, productIndex) in productList' :key='productIndex' class='product_item' @click.stop='onProductDetail(productItem._id)'>
            <img v-lazy='productItem.imgCover' alt>
            <div class='flex-space'>
              <div class='product_item_text'>
                <div class='product_title'>
                  {{ productItem.title }}
                </div>
                <div class='product_price flex'>
                  <div>￥{{ productItem.priceNow }}</div>
                </div>
              </div>
              <div class='goods-cartBox'>
                <van-icon name='cart-o' @click.stop='onAddCart(productItem)' />
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { NavBar, Swipe, SwipeItem, PullRefresh, Toast, Icon } from 'vant'
import { isPC } from '@/utils'
import { mapActions, mapState } from 'vuex'
export default {
  metaInfo () {
    return {
      title: this.$t('m.meta.product.title'),
      meta: [
        {
          name: this.$t('m.meta.product.name'),
          content: this.$t('m.meta.product.content'),
        },
      ],
    }
  },
  data () {
    return {
      isLoading: false,
    }
  },
  computed: {
    ...mapState(['bannerList', 'productList']),
  },
  components: {
    [NavBar.name]: NavBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
  },
  activated () {
    this.getBannerList()
    this.getProductData(0)
  },
  beforeMount () {
    this.getBannerList()
    this.getProductData(0)
    if (isPC()) {
      this.$nextTick(() => {
        this.$refs.pull.$el.classList.add('isPc')
      })
    }
    window.addEventListener('resize', this.resizeHandle)
  },
  beforeDestroy () {
    window.addEventListener('resize', this.resizeHandle)
  },
  methods: {
    ...mapActions(['getProductData', 'getBannerList', 'addCart']),
    resizeHandle () {
      if (!this.$refs.pull.$el.classList.contains('isPc') && isPC()) {
        this.$refs.pull.$el.classList.add('isPc')
      }
    },
    onRefresh () {
      this.getProductData(0).then(() => {
        this.isLoading = false
      })
    },
    onProductDetail (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id,
        },
      })
    },
    onAddCart (item) {
      this.addCart({ id: item._id, This: this })
    },
    onCategory (index) {
      this.setTabindex(index)
      this.$router.push('./category')
    },
  },
}
</script>

<style lang='scss' scoped>
.van-pull-refresh {
  overflow: auto;
  &.isPc {
    overflow: inherit;
  }
}
.swiper {
  height: 100px;
}
.swipe_img {
  width: 100%;
  height: 160px;
}
.container {
  padding-bottom: 0;
  font-size: 16px;
}
.content {
  flex-wrap: wrap;
  padding-bottom: 52px;
}
.product_header {
  font-size: 14px;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}
.product_item {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: white;
  &:nth-of-type(even) {
    border-right: none;
  }
  img {
    width: 100%;
    height: 180px;
  }
}
.product_item_text {
  color: #666;
  padding: 1px 8px;
  font-size: 13px;
}
.van-icon-cart-o {
  margin-right: 10px;
}
</style>
